<template>
	<view class="" @click="showPopups=false">
		<view class="search-box pb-0">
			<u-search placeholder="请输入" shape="square" v-model="searchData.name" @search="onSearch" :showAction="false" />
			<view class="custom-btn" @click.stop="$u.route('/pages/shop/Shareholder/edit',{type: '1'})">添加联创</view>
		</view>
		<view class="pl-20 pr-20 pb-10 bg-white">
			<u-tabs 
				:list="tags" 
				:current="selectTag" 
				@click.stop="sectionChange" 
				lineColor="#e54d42"
				:activeStyle="{color:'#e54d42'}">
				<view slot="right" style="padding-left: 4px;" @tap.stop="showPopups=true">
					<u-icon name="grid" size="28"></u-icon>
				</view>
			</u-tabs>
		</view>
		<view class="my-list padding-0">
			<u-list :height="swiperHeight" v-if="dataList.length > 0" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in dataList" :key="item.id">
					<view class="item fsize-26 " @click="goDetails(index)">
						<view class="flex align-center justify-between">
							<view class="">
								<view class="fsize-32 flex align-center">
									<text>{{item.userName}}</text>
									<text class="fsize-22 pl-14 pr-14 ml-10 bg-light-gary border-radius-tl-6 border-radius-tr-6">{{item.schemeName}}</text>
								</view>
								<view class="mt-10 line-gray fsize-24">
									<text>可结算:<text class="ml-10">￥{{item.bonusBalance}}</text></text>
									<text class="ml-20">剩余股本:<text class="ml-10">￥{{item.stockBalance}}</text></text>
								</view>
							</view>
							<view @click.stop>
								<!-- <uni-icons custom-prefix="iconfont" type="icon-phone" color="#81c66d" size="34" @click="phoneCall(item.phone)"/> -->
								<u-tooltip :text="item.phone" overlay></u-tooltip>
							</view>
						</view>
						<view class="border-t mt-20 flex" v-if="searchData.status===0">
							<view class="width-354 text-align-center border-r pt-20" @click.stop="setStockHolderDoCheck(2, item)">拒绝</view>
							<view class="width-355 text-align-center pt-20 line-red" @click.stop="setStockHolderDoCheck(1, item)">同意</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<!-- 无数据时默认显示 -->
		<view class="emptybox" v-if="dataList.length == 0">
			<u-empty icon-size="150" text="暂无数据" mode="data"></u-empty>
		</view>
		<my-popup-dialog :isShow="showPopups" :list="popList" :current="popupsIx" :top="176" :right="34"
			@onClickPopupItem="onClickPopMenu">
		</my-popup-dialog>
	</view>
</template>

<script>
	import myPopupDialog from '@/components/my-popup-dialog/index.vue'
	import listHeightMixin from '@/common/computedAltitude.js'
	export default {
		mixins:[listHeightMixin],
		components: { myPopupDialog },
		data() {
			return {
				showPopups: false,
				popupsIx: 0,
				selectTag: 0,
				res: {},
				dataId: 0,
				actionTitle: '店务操作',
				actionShow: false,
				tags: [
					{ name: '正常', value: 1 },
					{ name: '审核中', value: 0 },
					{ name: '已禁用', value: 2 },
				],
				dataList: [],
				popList: [],
				searchData: {
					name:'',
					status: 1,
					schemeId: 0,
					page: 1,
					limit: 20
				},
				loadmore:{
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				},
			}
		},

		onShow() {
			this.searchData.page = 1
			this.dataList = []
			this.getBonusSchemeList()
		},
		methods: {
			goDetails(ix){
				if(this.selectTag === 1) return
				uni.$u.route('/pages/shop/Shareholder/details', {id: this.dataList[ix].staffId})
			},
			setStockHolderDoCheck(status, item){
				const that = this
				uni.showModal({
					title: '联创审核',
					content: status===2?`拒绝之后将会删除该联创记录,确定拒绝【${item.userName}】通过联创审核吗?`:`确定同意【${item.userName}】通过联创审核吗?`,
					success: function (res) {
						if (res.confirm) {
							that.$reqJsonPost('StockHolderDoCheck', {status: status, id: item.id}).then(res=>{
								that.dataList = []
								that.searchData.page = 1
								that.getPageList()
							})
						}
					}
				});
			},
			getBonusSchemeList(){
				this.$reqPost('GetBonusSchemeList', { page: 1,limit: 999 }).then(res=>{
					this.popList = res.data.map(item=>{
						return { name:item.schemeName, value: item.id }
					})
					this.popList.unshift({ name:'全部类型', value: 0 })
					this.searchData.schemeId = this.popList[0].value
					this.searchData.page = 1
					this.dataList = []
					this.getPageList()
				})
			},
			getPageList(){
				this.$reqPost('GetStockHolderList', this.searchData).then(res=>{
					this.dataList = [...this.dataList, ...res.data]
					if (res.count > this.dataList.length) {
						this.searchData.page++
						this.loadmore.status = 'loadmore'
					}else {
						this.loadmore.status = 'nomore'
					}
				})
			},
			phoneCall(num){
				uni.makePhoneCall({ phoneNumber: num })
			},
			onClickPopMenu(e) {
				this.popupsIx = e.ix
				this.showPopups = false
				this.searchData.schemeId = e.value
				this.dataList = []
				this.searchData.page = 1
				this.getPageList()
			},
			sectionChange(e) {
				if (this.selectTag !== e.index){
					this.selectTag = e.index
					this.searchData.status = e.value
					this.searchData.page = 1
					this.dataList = []
					this.getPageList()
				}
			},
			onSearch(value) {
				this.searchData.page = 1
				this.dataList = []
				this.getPageList()
			},
			scrolltolower(){
				if(this.loadmore.status === 'loadmore'){
					this.getPageList()
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.search {
		padding: 10px 10px 0;
		background: #f8f8f8;
		height: 40px;
	}

	.tag {
		margin-left: 20rpx;
		font-size: 18rpx;
		font-weight: normal;
	}

	.btn-plus {
		position: absolute;
		bottom: 50rpx;
		right: 50rpx;
		z-index: 1;
		opacity: 0.6;
	}

	.btn-plus:hover {
		opacity: 1;
	}
	.subtitleinline {
		display: inline-block;
		padding-right: 10px;
		font-size: 14px;
	}

	.vertical-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>